<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/xiangqing.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2749103_poae12kgbo9.css">
</head>

<body>
    <div class="header w">
        <div class="header-search">
            <ul>
                <li><a href="">注册</a></li>
                <li><a href="http://127.0.0.1:8080/login.html">登录</a></li>
                <li>
                    <span><a href="" class="iconfont icon-gerenzhongxin-zhong">账户</a></span>
                </li>
                <li>
                    <span><a href="" class="iconfont icon-xin">收藏夹</a></span>
                </li>
                <li>
                    <i></i>
                    <span><a href="" class="iconfont icon-xinfeng">站内信</a></span>
                </li>
                <li>
                    <i></i>
                    <span><a href="" class="iconfont icon-erji">联系客服</a></span>
                </li>
                <li>
                    <i></i>
                    <span><a href="" class="iconfont icon-f-shop">门店购买</a></span>
                </li>
                <li>
                    <span class="iconfont icon-fangdajing"></span>
                    <input type="text" name="" id="" placeholder="站内搜索" class="zhannei-sousuo ">
                </li>
            </ul>
        </div>
    </div>

    <div class="logoBox w">
        <img src="./images/LOGO.gif" alt="" class="logo fl">
        <ul class="fl fs14">
            <li><a href="">女 装&nbsp;WOMEN</a></li>
            <li><a href="">男 装&nbsp;MEN</a></li>
            <li><a href="">童 装&nbsp;KIDS</a></li>
            <li><a href="">婴 幼 儿 装&nbsp;BABY</a></li>
        </ul>
        <div class="logoRight fr">
            <ol>
                <li>
                    <a href="">防诈骗公告</a>
                </li>
                <li>
                    <a href="">网上购买指南</a>
                </li>
                <li>
                    <a href="">关注我们</a>
                </li>
                <li>
                    <a href="" class="gonggao">公告区</a>
                </li>
                <li>
                    <a href="" class="dianpu">店铺资料</a>
                </li>
            </ol>
        </div>
    </div>

    <!-- 回到顶部 -->
    <div class="back-top"></div>

    <!-- 图片及内容 -->
    <section class="w">


        <div class="section-left fl">
            <div class="s-left fl pos-r">
                <!-- 小图区域展示 -->
                <div class="smallImg">
                    <ol>
                    </ol>
                    <!-- 上下箭头 -->
                    <!-- <span class="iconfont icon-fanye-r pos-a"></span>
                    <span class="iconfont icon-fanye-b pos-a"></span> -->
                </div>
            </div>
            <!-- 中图区域展示 -->
            <div class="s-middle fl">
                <div class="middleImg pos-a">
                    <img src="./images//small_1.jpg" alt="">
                    <div class="middleArea pos-a"></div>
                </div>
                <!-- 左右箭头 -->
                <!-- <span class="iconfont icon-fanyeico pos-a"></span>
                <span class="iconfont icon-fanyejiantouxi pos-a"></span> -->
            </div>
            <!-- 大图区域展示 -->
            <div class="bigArea fl pos-a">
                <img src="" alt="" class="bigImg">
            </div>
        </div>


        <!-- 右边内容 -->
        <div class="s-right fr">
            <div class="sr-title">女装 弹力直筒裤(百搭通勤职业) 439257</div>
            <div class="price">￥299.00</div>
            <div class="prev-price1 fl" style="margin-left: 0px;">初上市价格：</div>
            <div class="prev-price2 fl">￥299.00</div>
            <div class="server-quality fr">
                <span class="iconfont icon-start"></span>
                <span class="iconfont icon-start"></span>
                <span class="iconfont icon-start"></span>
                <span class="iconfont icon-start"></span>
                <span class="iconfont icon-start"></span>
            </div>

            <!-- 颜色 -->
            <!-- 点击事件：跳转到图片 -->
            <div class="color-content" style="margin-top: 30px;">颜色</div>
            <div class="color-square1 fl"></div>
            <div class="color-square2 fl"></div>
            <div class="color-square3 fl"></div>
            <!-- 尺码 -->
            <div class="size" style="height: 1px;"></div>

            <!-- 尺码表 -->
            <!-- 推荐 -->
            <div class="recommend">
                <span>推荐：</span>
                <span>请维护个人尺码信息，以获得适合的尺码推荐</span>
                <span><a href="" class="person-size">编辑个人尺码信息</a></span>
            </div>
            <!-- 配送方式 -->
            <div class="delivery-method">
                配送方式：
                <input type="radio" value="man" name="sex" checked="checked" id="man" /><label for="man">快速配送</label>
                <input type="radio" value="woman" name="sex" id="woman" /><label for="woman">门店自提</label>
            </div>
            <!-- 配送至 -->

            <!-- 修改裤长 -->
            <div class="xiugai fs14 pos-r">
                <div class="xiugai-left fl">修改裤长（内档长）：</div>
                <div class="xiugai-right fr">
                    <a href="">测量方法&缝补信息</a>
                </div>
                <input type="text" placeholder="不修改" class="no-xiugai ">
                <span class="iconfont icon-a-daosanjiaoxingmianxing pos-a fs12"></span>
            </div>
            <!-- 礼包选择 -->
            <div class="gift-pack-select fs14 pos-r">
                <div class="gp-select-left fl">礼品包选择：</div>
                <div class="gp-select-right fr">
                    <a href="">礼品包装信息</a>
                </div>
                <input type="text" placeholder="不需要" class="no-xuyao pos-a">
                <span class="iconfont icon-a-daosanjiaoxingmianxing pos-a fs12"></span>
            </div>
            <!-- 数量 -->
            <div class="number fs14">
                <span>数量：</span>
                <button class="sub">-</button>
                <input type="text" value="1" id="num" style="text-align: center;">
                <button class="sup">+</button>
                <span class="save-enought">库存充足</span>
            </div>
            <!-- 立即购买 -->
            <div class="buy-now fl">立刻购买</div>
            <div class="add" style="float: left;">&nbsp;添加至购物车</div>
            <div class="check_gouwuche fl"><a href="http://127.0.0.1:8080/gouwuche.html" style="color: white;">&nbsp;查看购物车</a></div>
            <!-- 支持30天无理由退换货 -->
            <div class="zhichi fs14 fl">支持三天无理由退换货</div>
            <div class="fenxiangsahngpin fl fs14">
                <img src="./images/fenxiang.png" alt="" class="fl">
                <span class="fl"> &nbsp;分享商品</span>
            </div>
            <div class="shoucangshangpin fl fs14">
                <img src="../images/shoucang.jpg" alt="" class="fl">
                <span class="fl"> &nbsp;收藏</span>
            </div>
        </div>
    </section>

    <!-- 商品详情之类的 tab栏 -->
    <div class="footer w">
        <div class="footer-left fl">
            <img src="./images/tab.jpg" alt="" class="left-fiest">
            <img src="./images/week-new.jpg" alt="" class="left-second">
            <!-- 商品分类 -->
            <div class="category fs12">
                <ul>
                    <li>
                        <i></i>
                        <span>商品分类</span>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>新作商品0816</a>
                    </li>
                    <li>
                        <a>全商品</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>男装全商品</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>女装全商品</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>童装全商品</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>婴幼儿装全商品</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>UT印花系列</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>男装UT印花系列</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>女装UT印花系列</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>童装UT印花系列</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>婴幼儿装UT印花系列</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>本周超值精选</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>女装特大/特小尺码</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>男装特大/特小尺码</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>童装特大/特小尺码</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>婴幼儿装特大/特小尺码</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>婴幼儿装限时特优[08/13起]</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>限时特优0820</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>男装限时特优[08/20起]</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>女装限时特优[08/20起]</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>童装限时特优[08/20起]</a>
                    </li>
                    <li>
                        <i><img src="./images/leftsanjiaoxing.png" alt=""></i>
                        <a>婴幼儿装限时特优[08/20起]</a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 右边 -->
        <!-- tab 栏内容 -->
        <div class="box fr">
            <div class="hd">
                <span class="current">商品详情</span>
                <span>商品评价（3）</span>
                <span>购买咨询</span>
            </div>
            <div class="bd">
                <ul>
                    <li class="current">
                        <img src="./images/tab-bottom_1.jpg" alt="" class="tab-bottom_1">
                        <img src="./images/tab-bottom_2.jpg" alt="" class="tab-bottom_2">
                        <img src="./images/tab-bottom_3.jpg" alt="" class="tab-bottom_3">
                        <img src="./images/middle_1.jpg" alt="" class="radio-img">

                        <div class="category-know">商品说明</div>
                        <p class="waiguan fs14">
                            外观斯文、穿着感舒适的弹力裤子。剪裁利落，优美有型。
                            <br> ·采用弹力面料制成
                            <br> ·洗后较不易起皱 <br> ·修身的直筒裤建材
                            <br> ·有助于展现修长的腿部线条
                        </p>
                        <span class="fs14">【面料组成】</span>
                        <span class="fs14">聚酯纤维100%</span>
                        <br>
                        <span class="fs14">【洗涤信息】</span>
                        <span class="fs14">机洗</span>
                        <br>
                        <span class="fs14">【护理信息】</span>
                        <span class="fs14">
                            垫布熨烫。<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请使用洗衣网袋。<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;深色衣物请勿与其他衣物一同洗涤。<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请避免使用含有荧光剂增白剂的洗涤剂。<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请勿在水中长时间浸泡。<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请整形后晾干。<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请短时间脱水。<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在出汗或被雨淋湿时，会因摩擦而沾色到其他衣物上，敬请注意。<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此商品因面料编织特性上的原因，纤维如被指甲或突起物、饰物及包类上的金属部分等钩拉，可能会发生抽纱的现<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;象，穿着和保管时请注意。
                        </span>
                        <br>
                        <span class="fs14">【初上市价】</span>
                        <span class="fs14">299元</span>
                        <br>
                        <span class="fs14" style="color: red;">【关于退换货】</span>
                        <span class="fs14" style="color: red;">此商品在商品完好，符号相关退换货规则的前提下支持30天无理由退换货</span>
                        <br>

                        <div class="category-know">产品展示</div>
                        <img src="./images/tab-img_1.png" alt="">
                        <img src="./images/tab-img_2.png" alt="">
                        <img src="./images/tab-img_3.png" alt="">
                        <div class="category-know">商品细节</div>
                        <img src="./images/tab-img_4.png" alt="">
                        <img src="./images/tab-img_5.png" alt="">
                        <img src="./images/tab-img_6.png" alt="">
                        <div class="category-know">商品尺寸</div>
                        <img src="./images/tab-size.png" alt="">
                        <img src="./images/tab-img_know.jpg" alt="">
                        <img src="./images/tab-img_tishi.jpg" alt="">
                    </li>
                    <li>
                        <img src="./images/tab-pingjia.png" alt="">
                    </li>
                    <li>
                        <img src="./images/tab-QandA.png" alt="">
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <!-- 底部 -->
    <!-- 下面导航栏 -->
    <div class="footer1 w">
        <img src="./images/footer_logo.gif" alt="" class="footerLogo fl">
        <div class="footerNav fl">
            <ul>
                <li><a href="https://www.uniqlo.cn/shop/shop_list.html">店铺资料</a></li>
                <li><a href="https://event.uniqlo.cn/hrchina/recruitment/">招聘信息</a></li>
                <li><a href="#">访问权限</a></li>
                <li><a href="https://www.uniqlo.cn/privacy_policy.html">隐私保护</a></li>
            </ul>
        </div>
    </div>

    <!-- 下面安全系统 -->
    <div class="footer2 w fs12">讯销（中国）商贸有限公司</div>
</body>

<script src="./js/header.js"></script>
<script src="./js/backTop.js"></script>

<script src="./js/xiangqing_tab.js"></script>
<script src="./js/fangdajing.js"></script>
<script src="./js/animate.tools.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/layer/layer.js"></script>
<script src="./js/cart.js"></script>


</html>